<template>
  <div class="audio-wrapper">
    <audio ref="audio" @canplay="getDuration" @timeupdate="updateProgress" @ended="callBack" src="" controls="controls" hidden>
     
    </audio>
    <div class="audio-left">
        <a-icon v-show="myPlayTemp" type="play-circle" style="color:green;font-size: 16px;"/>
    </div>
    <div class="audio-right">
      <div class="audio-time">
        <span class="audio-length-current" ref="audioCurTime">{{currentTime}}</span>
        <div class="progress-bar-bg" ref="progressBarBg" >
          <span ref="progressDot"></span>
          <div class="progress-bar" ref="progressBar"></div>
        </div>
        <span class="audio-length-total" ref="duration">{{duration}}</span>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "myAudio",
  data() {
    return {
      audio: "",
      myPlayTemp: true,
      currentTime: 0,
      duration:20,
    };
  },
  mounted() {
    
  },
  methods: {
    init(data) {
        let {src,volume} = data;
        this.audio = this.$refs.audio;
        this.audio.src = src;
        this.audio.volume = volume;
        this.audio.load();
       
    //   this.updateProgress();
    },
    // 点击播放/暂停图片时，控制音乐的播放与暂停
    // myPlay() {
    //   if (this.audio.paused) {
    //     // 开始播放当前点击的音频
    //     this.audio.play();
    //     this.myPlayTemp = false;
    //   } else {
    //     this.audio.pause();
    //     this.myPlayTemp = true;
    //   }
    //   this.updateProgress();
    // },

    // 更新进度条与当前播放时间
    updateProgress(e) {
    // console.log("updateProgress:当前播放进度",e.target.currentTime);
      let value = this.audio.currentTime / this.audio.duration;
    //   console.log("更新进度条与当前播放时间",value * 100 + "%");
      this.$refs.progressBar.style.width = value * 100 + "%";
      this.$refs.progressDot.style.left = value * 100 + "%";
      // 初始时间
      this.currentTime = parseInt(this.audio.currentTime);
    },
    getDuration(){
        this.audio.play();
        console.log("getDuration获取时间",);
        this.myPlayTemp = true;
        this.duration = parseInt(this.audio.duration);
    },
    callBack(){
        this.$emit("callBack");
    },
    // 播放结束时
    audioEnded() {
      this.$refs.progressBar.style.width = 0 + "%";
      this.$refs.progressDot.style.left = 0 + "%";
      this.myPlayTemp = true;
    },
    // 播放时间换算
    transTime(value) {
      let time = "";
      let h = parseInt(value / 3600);
      value %= 3600;
      let m = parseInt(value / 60);
      let s = parseInt(value % 60);
      if (h > 0) {
        time = this.formatTime(h + ":" + m + ":" + s);
      } else {
        time = this.formatTime(m + ":" + s);
      }
      return time;
    },
    //  * 格式化时间显示，补零对齐
    //  * eg：2:4  -->  02:04
    formatTime(value) {
      let time = "";
      let s = value.split(":");
      let i = 0;
      for (; i < s.length - 1; i++) {
        time += s[i].length == 1 ? "0" + s[i] : s[i];
        time += ":";
      }
      time += s[i].length == 1 ? "0" + s[i] : s[i];
      return time;
    },
    // 点击进度条跳到指定点播放
    handledown() {
      // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
      console.log(this.audio.currentTime);
      if (!this.audio.paused || this.audio.currentTime != 0) {
        let pgsWidth = this.$refs.progressBarBg.offsetWidth;
        let rate = event.offsetX / pgsWidth;
        this.audio.currentTime = this.audio.duration * rate;
        this.updateProgress();
      }
    }
  },
  watch: {
    // audio: function(params) {
    //   let self = this;
    //   self.audio.addEventListener(
    //     "timeupdate",
    //     function() {
    //       // console.log('开始');
    //       self.updateProgress();
    //     },
    //     false
    //   );
    //   self.audio.addEventListener(
    //     "ended",
    //     function() {
    //       // console.log('结束');
    //       self.audioEnded();
    //     },
    //     false
    //   );
    // }
  }
};
</script>
 
<style lang="scss" scoped>
.audio-wrapper {
  background-color: #f8f8f8;
  margin: 10px auto;
  width: 70%;
//   height: 50px;
  border-radius: 50px;
}
 
.audio-left {
  float: left;
  text-align: center;
  width: 15%;
  height: 100%;
}
 
.audio-left img {
  width: 40px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  cursor: pointer;
}
 
.audio-right {
  float: left;
  width: 80%;
  height: 100%;
}
 
.progress-bar-bg {
  background-color: #d9d9d9;
  position: relative;
  height: 2px;
  cursor: pointer;
}
 
.progress-bar {
    display: block !important;
    background-color: #649fec;
    width: 0;
    height: 2px;
}
 
.progress-bar-bg span {
  content: " ";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: #3e87e8;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
  margin-left: -5px;
  cursor: pointer;
}
 
.audio-time {
  margin-top: 5%;
}
 
.audio-length-total {
  float: right;
  font-size: 12px;
}
 
.audio-length-current {
  float: left;
  font-size: 12px;
}
</style>